<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的规则五</title>
  </head>
  <style>
    /* 
    规则四：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
    规则五：浮动元素之间不能层叠

           - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素
           （左浮找左浮，右浮找右浮）
           - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

    */
    .box {
      width: 350px;
      height: 400px;
      background-color: pink;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }

    .box3 {
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      float: left;
    }
  </style>

  <body>
    <div class="box">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </body>

</html>